<template>
  <div id="detail">
    <!-- -------标题栏------------ -->
    <title-bar>
      <h2 slot="left"> &lt; </h2>
      <h2 slot="center">详情</h2>
    </title-bar>
    <!-- -------轮播图------------ -->
    <van-swipe class="my-swipe" :autoplay="0" indicator-color="white">
      <van-swipe-item 
      v-for="(item,index) in goods_info.pics" :key="index"
      >
        <img :src="item.pics_sma_url" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- -------商品信息---------- -->
    <div class="shop-message">
      <p class="shop-price">￥{{goods_info.goods_price}}</p>
      <div class="shop-title">
        <p class="shop-mes">
          {{goods_info.goods_name}}
        </p>
        <div class="shop-collect" @click="collectClick">
          <van-icon 
            name="star-o" 
            ref="icon" 
            :style="{color:isChecked ? 'red' : '#333'}"/>
          <p ref='ct'>{{cert}}</p>
        </div>
      </div>
      <p class="shop-baoyou">快递: 免运费</p>
    </div>
    <!-- 加入购物车 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="num" @click="goToShopCart" />
      <van-goods-action-button color='yello' type="info" text="加入购物车" @click="addshop" />
      <van-goods-action-button color='#ff2d4a' type="infos" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem, Icon } from 'vant';
import "vant/lib/swipe/style"
import 'vant/lib/swipe-item/style'
import 'vant/lib/icon/style'
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';
import 'vant/lib/goods-action/style'
import 'vant/lib/goods-action-button/style'
import 'vant/lib/goods-action-icon/style'
import { Toast } from 'vant';
import 'vant/lib/toast/style'

Vue.use(Toast);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
Vue.use(Icon);
Vue.use(Swipe);
Vue.use(SwipeItem);
import TitleBar from '../components/common/title_bar/TitleBar.vue'
export default {
  components: { TitleBar },
  name:"Detail",
  props:{
    goods_id:Number
  },
  data() {
    return {
      goods_info:{},
      cert:"收藏",
      isChecked:false,
      num : 0
    }
  },
  filters:{
    toFixed(v){
      if(v){
        return v.toFixed(2)
      }  
    }
  },
  created() {
    this.$http({
      url:"/api/public/v1/goods/detail",
      methods:"get",
      params:{
        goods_id:this.goods_id
      }
    }).then(res => {
      console.log(res)
      this.goods_info = res.data.message
    })
    var s = localStorage.getItem('shopcart')
    s = s == null ? [] : JSON.parse(s)
    if(s.length == 0){
      this.num = ""
    }else{
      this.num = length
    }
  },
  methods:{
    collectClick(){
      const ic =  this.$refs.icon
      if(ic.classList.contains("van-icon-star-o")){
        ic.classList.add("van-icon-star")
        ic.classList.remove("van-icon-star-o")
        this.cert = "已收藏"
        this.isChecked = true
        
      }else{
        ic.classList.remove("van-icon-star")
        ic.classList.add("van-icon-star-o")
        this.cert = "收藏"
        this.isChecked = false
      }
    },
    addshop(){
      Toast.success('加入成功');
      const shopInfo = {
        shpo_name:this.goods_info.goods_name,
        shop_id:this.goods_info.goods_id,
        shop_price:this.goods_info.goods_price,
        shop_img:this.goods_info.goods_small_logo,
        isChecked:true
      }
      var s = localStorage.getItem("shopcart");
      s = s == null ? [] : JSON.parse(s);
      var boo = s.every((item,index)=>{
        if(item.shop_id == shopInfo.shop_id){
          s[index].shop_num++
        }
        return item.shop_id != shopInfo.shop_id
      })
      if(boo){
        shopInfo.shop_num = 1;
        s.push(shopInfo)
      }
      localStorage.setItem('shopcart',JSON.stringify(s))
      this.num = s.length
    },
    goToShopCart(){
      this.$emit('goCart')
    }
  }
}
</script>

<style scoped>
  img{
    width: 100%;
    height: 300px;
  }
  .shop-price{
    font-size: 26px;
    color: red;
    padding-left: 10px;
  }
  .shop-title{
    display: flex;
  }
  .shop-collect{
    width: 80px;
    text-align: center;
    border-left: 1px solid #ccc;
    line-height: 30px;
  }
  .shop-mes{
    flex: 1;
    padding: 0px 30px 0px 10px;
  }
  .shop-baoyou{
    color: #888;
    font-size: 14px;
    padding-left: 10px;
    margin-top: 5px;
  }
  .van-goods-action-button--first{
    border-radius: 0;
  }
  .van-goods-action-button--last{
    border-radius: 0;
  }
  .van-goods-action-icon{
    width: 80px;
  }
</style>